
import Vue from 'vue'
import App from './App'
// 初始化和挂载 Vue 实例
import router from './router'
import store from './store'

import lodash from 'lodash'

import ElementUI from 'element-ui'
import '@/assets/theme/index.css'

import '@/assets/icon/iconfont.css'

import {formatTime} from "./utils/time";
// Vue：导入 Vue 框架。
// App：导入根组件 App.vue。
// router：导入 Vue Router 实例，用于管理应用的路由。
// store：导入 Vuex 状态管理实例，用于管理应用的状态。
// lodash：导入 Lodash 库，这是一个常用的 JavaScript 工具库。
// ElementUI：导入 Element UI 组件库，用于构建用户界面。
// CSS 文件：导入应用的样式和图标文件。
// formatTime：导入时间格式化的工具函数

// 这行代码用于关闭 Vue 在启动时的生产提示，通常在生产环境中使用
Vue.config.productionTip = false
// 这行代码将 Element UI 插件安装到 Vue 中，使得应用可以使用 Element UI 提供的组件
Vue.use(ElementUI)
// 这行代码将 Lodash 赋值给 Vue 的原型属性 $_，这样在 Vue 的组件中可以通过 this.$_ 来访问 Lodash 的功能
Object.defineProperty(Vue.prototype, '$_', { value: lodash })

// 这段代码定义了一个自定义指令 v-title，可以用来动态设置文档的标题
Vue.directive('title',  function (el, binding) {
  document.title = el.dataset.title
})
// 格式话时间
// 这行代码定义了一个过滤器 format，用于格式化时间，组件可以使用 {{ time | format }} 的方式来调用
Vue.filter('format', formatTime)

// 创建 Vue 实例
// el: '#app'：指定 Vue 实例挂载到 index.html 中的 <div id="app"></div> 这个元素上。
// router 和 store：将 Vue Router 和 Vuex 状态管理器实例传递给 Vue 实例，使得整个应用可以访问路由和状态。
// template: '<App/>'：指定根组件的模板为 <App/>，这实际上是用来渲染 App 组件。
// components: { App }：注册 App 组件，使其可以在模板中使用。
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

// main.js 是 Vue 应用程序的入口文件，负责初始化和挂载 Vue 实例。
// 通过 new Vue({ el: '#app', ... })，Vue 实例被挂载到 index.html 中的 <div id="app"></div>，这使得 Vue 可以在该元素中渲染整个应用。
// App.vue 作为根组件，包含了应用的主要结构和内容，而路由和状态管理则通过 router 和 store 提供支持。
